<!DOCTYPE html>
<html lang="en">
    <head>
        {include file="common/meta_new" /}

    <style>
        .loading{
            text-align: center;
            height: 0.3rem;
            line-height: 0.3rem;
            margin-top: 0.15rem;
            color: #C0C0C0;
            font-size: 12px;

        }
    </style>
    </head>
    <body class="F5">
        <div id="app" class="taskaudit-page">
            <!-- header -->
            <div class="header">
                <div class="header-height"></div>
                <div class="header-wrap">
                    <div class="header-content">
                        <div class="left">
                            <a href="{:url('index/user/index');}"><div class="go-back"><img src="/static/images/go-back.png" alt=""></div></a>
                            <div class="text">任务审核</div>
                        </div>
                        <div class="title"></div>
                    </div>
                </div>
            </div>
            <div class="top-wrap">
                <div class="left">
                    <div class="number">{$total}</div>
                    <div class="label">订单数量</div>
                </div>
                <div class="line"></div>
                <div class="right">
                    <div class="amount"><span>￥</span>{$totalMoney}</div>
                    <div class="label">订单金额</div>
                </div>
            </div>
            <div class="tag-list">
                <div class="item active" onclick="switchTab(this, 0)">
                    <div class="text">未审核</div>
                    <img src="/static/images/bingji.png" alt="">
                </div>
                <div class="item " onclick="switchTab(this, 1)">
                    <div class="text">已审核</div>
                    <img src="/static/images/bingji.png" alt="">
                </div>
            </div>

            <div id="rm_con" class="list-wrap">

            </div>
        </div>
        <script src="/static/js/common.js"></script>
        <script language="javascript">
            var auditStatus = 0;
            function switchTab(that, status) {
                auditStatus = status;
                $(that).parent('.tag-list').children('.item').removeClass('active');
                $(that).addClass('active')
                $('#rm_con').html('');
                page=1;
                load_url(auditStatus);
                
            }
            function getScrollTop() {
                var scrollTop = 0;
                if (document.documentElement && document.documentElement.scrollTop) {
                    scrollTop = document.documentElement.scrollTop;
                } else if (document.body) {
                    scrollTop = document.body.scrollTop;
                }
                return scrollTop;
            }
            function getClientHeight() {
                var clientHeight = 0;
                if (document.body.clientHeight && document.documentElement.clientHeight) {
                    clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
                } else {
                    clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
                }
                return clientHeight;
            }
            function getScrollHeight() {
                return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
            }

            var page = 1;
            var lock = 1;
            function load_html(result) {
                var lists = result.data;
                if (lists.length > 0) {
                    for (i = 0, ii = lists.length; i < ii; i++) {
                        var tmp_html = '';
                        var tmp_data = lists[i];
                        if (tmp_data.avatar == false || tmp_data.avatar == '') {
                            tmp_data.avatar = '/assets/img/avatar.png';
                        }
                        tmp_html += '<div class="item">';
                        switch (tmp_data.order_type) {
                            case 0:
                                tmp_html += '    <div class="tag">--</div>';
                                break;
                            case 1:
                                tmp_html += '    <div class="tag">直推</div>';
                                break;
                            case 2:
                                tmp_html += '   <div class="tag blue">平台</div>';
                                break;
                            case 3:
                                tmp_html += '<div class="tag orange">级别</div>';
                                break;
                            default:
                                tmp_html += '    <div class="tag">--</div>';
                                break;
                        }
                        tmp_html += '    <div class="tag">直推</div>';

                        tmp_html += '    <div class="row">';
                        tmp_html += '        <div class="rank">' + tmp_data.key + '</div>';
                        tmp_html += '        <div class="avatar">';
                        tmp_html += '            <img src="' + tmp_data.avatar + '" alt="">';
                        tmp_html += '        </div>';
                        tmp_html += '        <div class="name-box">';
                        tmp_html += '            <div class="nickname">' + tmp_data.nickname + '</div>';
                        tmp_html += '            <div class="phone">' + tmp_data.mobile + '</div>';
                        tmp_html += '        </div>';
                        tmp_html += '    </div>';
                        tmp_html += '    <div class="right-wrap">';
                        tmp_html += '        <div class="right-box">';
                        switch (tmp_data.status) {
                            case - 2:
                                tmp_html += '<a href="' + tmp_data.url + '"><div class="btn">已驳回</div></a>';
                                break;
                            case - 1:
                                tmp_html += '<a href="' + tmp_data.url + '"><div class="btn">已超时</div></a>';
                                break;
                            case 1:
                                tmp_html += '<a href="' + tmp_data.url + '"><div class="btn blue">进入审核</div></a>';
                                tmp_html += '<div id="timeOut_' + tmp_data.key + '" class="time"></div>';
                                break;
                            case 2:
                                if(tmp_data.is_expire_time==1){
                                    tmp_html += ' <a href="' + tmp_data.url + '"><div class="btn green" style="font-size: .3rem">超时自动确认</div></a>';
                                }else{
                                    tmp_html += ' <a href="' + tmp_data.url + '"><div class="btn green">已确认</div></a>';
                                }
                                break;
                            default:
                                tmp_html += ' ';
                                break;
                        }

                        tmp_html += '        </div>';
                        tmp_html += '    </div>';
                        tmp_html += '</div>';
                        $('#rm_con').append(tmp_html);
//                        console.log("timeOut_"+tmp_data.key);
                        if(tmp_data.status==1){
                            startCountdown($("#timeOut_" + tmp_data.key), tmp_data.expiretime,tmp_data.id);
                        }
                    }
                    if (lists.length <= 0) {
                        $('#rm_con').append('<div class="loading">- 加载完成 -</div>');
                    } else {
                        lock = 0;//解除加载锁
                    }
                } else {
                    $('#rm_con').append('<div class="loading">- 加载完成 -</div>');
                }
            }
            function load_url(status) {
                var url = '{:url("index/team/auditUserList",[],false)}?page=' + page + '&status=' + status;
                $.get(url, function (ret) {
                    load_html(ret);
                }, 'json');
            }

            $(function () {
                $(window).scroll(function () {
                    var sH = getScrollHeight();
                    var sT = getScrollTop();
                    var cH = getClientHeight();
                    if (sH - cH - sT < 50) {
                        if (lock == 0) {
                            lock = 1;//防止重复加载
                            page = page + 1;
                            load_url(auditStatus);
                        }
                    }
                    //                console.log(sH + ',' + sT + ',' + cH);
                });
                load_url(auditStatus);
            });
            $('#phoneNum').on('input', function () {
                page = 1;
                $('#rm_con').html('');
                load_url(auditStatus);
            });
    function sendTimeOut(oid){
        $.post("{:url('index/Team/setOrderTime','',false)}",{'id':oid},function(ret){
            console.log(ret);
        });
    }

            function startCountdown(element, seconds,oid) {
//                if (seconds == 0) {
//                    element.prev('div').text("已超时");
//                    element.prev('div').attr('class', 'btn');
//                    element.remove();
//                    return;
//                }
                const interval = setInterval(() => {
                    if (seconds <= 0) {
                        clearInterval(interval); // 停止倒计时
                        element.text('');
                        element.prev('a').find('div').text("已超时");
                        element.prev('a').find('div').attr('class', 'btn');
                        element.remove();
                        sendTimeOut(oid);
                    } else {
                        // 计算小时、分钟、秒
                        const hours = String(Math.floor(seconds / 3600)).padStart(2, '0');
                        const minutes = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
                        const secs = String(seconds % 60).padStart(2, '0');

                        // 更新 DOM 内容
                        element.text(`倒计时：${hours}:${minutes}:${secs}`);
                        seconds--;
                    }
                }, 1000); // 每秒更新一次
            }
        </script>
    </body>
</html>